<template>
  <div class="them" ref="testScroll">
    <Loadin />
    <h2>防抖测试</h2>
    <input v-model="keyWord" style="width: 380px; height: 30px" />
    <div>{{ keyWord }}</div>
    <div id="backTop" @click="handleBackTop" v-if="btnFlag">op</div>
    <hr />
    <!-- <el-image :data-src="item" style="width: 400px; height: 200px; margin: 10px" v-for="(item, index) in imgArr" :key="index" lazy :src="item">
      <template #placeholder>
        <div style="width: 100%; height: 100%; text-align: center; line-height: 200px; background-color: #fff">Loading...</div>
      </template>
    </el-image> -->
    <img
      class="lazy_img"
      v-for="(item, index) in imgArr"
      :data-src="item"
      src=""
      :key="index"
      style="width: 400px; height: 200px; margin: 10px; background-color: #fff"
    />

    <div class="oberdom" style="background: #f40; width: 400px; height: 100px">hhh</div>
  </div>
</template>

<script setup>
import { onMounted, onUnmounted, ref, nextTick } from 'vue';
// 组件
import Loadin from '@/components/Loading.vue';
import { debounceRef } from '../utils/common';
var keyWord = debounceRef('ddd');
var scrollTop = ref(0);
var btnFlag = ref(false);

// 图片数组
var imgArr = ref([]);
let srcw = 'https://fuss10.elemecdn.com/9/bb/e27858e973f5d7d3904835f46abbdjpeg.jpeg';
let srcw1 = 'https://fuss10.elemecdn.com/3/28/bbf893f792f03a54408b3b7a7ebf0jpeg.jpeg';
let srcw2 = 'https://fuss10.elemecdn.com/1/34/19aa98b1fcb2781c4fba33d850549jpeg.jpeg';

// 图片观察实例
var obeserInstance;

// 图片渲染赋值
imgArr.value = [
  srcw,
  srcw,
  srcw1,
  srcw,
  srcw,
  srcw1,
  srcw,
  srcw,
  srcw1,
  srcw,
  srcw,
  srcw,
  srcw,
  srcw,
  srcw,
  srcw,
  srcw,
  srcw,
  srcw,
  srcw,
  srcw,
  srcw,
  srcw,
  srcw,
  srcw,
  srcw2
];

// 触发监听回调
//@prams entris Array  观察对象的集合
// 注意这个回调在进入和离开都会触发一次 所以我们设置src后不在观察 提升性能
const imgCaback = (entris) => {
  entris.forEach((ig) => {
    // 说明观察对象出现在视口范围
    if (ig.isIntersecting) {
      console.log('----', ig);
      let dataSrc = ig.target.getAttribute('data-src');
      ig.target.setAttribute('src', dataSrc);
      // 设置玩图片src 后不在观察
      obeserInstance.unobserve(ig.target);
    }
  });
};
// 创建监听实例
obeserInstance = new IntersectionObserver(imgCaback);
// 对具体dom 开启监听
// 放在nextTick 说明dom 创建完成啦
nextTick(() => {
  let imgDom2 = document.querySelectorAll('.lazy_img'); //nodeList
  //对每一项图像dom进行观察
  imgDom2.forEach((item) => {
    obeserInstance.observe(item);
  });
});

// 点击回到顶部事件
const handleBackTop = () => {
  let timer;
  let ispeed;
  timer = setInterval(() => {
    // 这样的目的就是变化速度 实现回去滚动效果 而已
    ispeed = Math.floor(-scrollTop.value / 5);
    // 核心 document.documentElement.scrollTop = document.body.scrollTop 设置为0
    document.documentElement.scrollTop = document.body.scrollTop = scrollTop.value + ispeed;
    if (scrollTop.value === 0) {
      clearInterval(timer);
    }
  }, 16);
};

//滚动实时计算scrollTop的值 动态变化
// 为了计算距离顶部的高度，当高度大于0显示回顶部图标，小于0则隐藏
const scrollToTop = () => {
  scrollTop.value = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop;
  // console.log('0000', scrollTop.value);
  if (scrollTop.value > 0) {
    btnFlag.value = true;
  } else {
    btnFlag.value = false;
  }
};

onMounted(() => {
  window.addEventListener('scroll', scrollToTop);
});
onUnmounted(() => {
  window.removeEventListener('scroll', scrollToTop);
});
</script>

<style lang="scss" scoped>
// @import '~@/styles/mixin.scss';
@use '~@/styles/mixin.scss' as MiXin;

.them {
  @include MiXin.mainWidth;
  background: var(--el-bg-color-page);
  padding: 16px;
  position: relative;

  #backTop {
    background: #fff;
    width: 80px;
    height: 80px;
    position: fixed;
    right: 40px;
    bottom: 40px;
    box-shadow: 1px 1px 2px #ccc;
    border-radius: 50%;
    text-align: center;
    line-height: 80px;
    font-size: 24px;
  }
}
</style>
